<markdown>
  # 自定义渲染

  通过插槽 `#date-cell` 来自定义渲染内容
</markdown>

<template>
  <div class="flex flex-col flex-wrap gap-4">
    <b>休假日</b>

    <x-calendar v-model:value="value">
      <template #date-cell="{ date }">
        <div class="relative">
          {{ date.format('DD') }}
          <span v-if="[0, 6].includes(date.day())" class="absolute right-1.5 bottom-1.5 text-2 leading-4 c-green">休</span>
        </div>
      </template>
    </x-calendar>

    <b>发薪日</b>

    <x-calendar v-model:value="value" style="width: 600px; height: 600px">
      <template #date-cell="{ date }">
        <div class="relative h-16 leading-16">
          {{ date.format('DD') }}
          <span v-if="date.date() == 15" class="absolute c-green">薪</span>
        </div>
      </template>
    </x-calendar>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import moment from 'moment'

const value = ref(moment())
</script>
